<template>
	<div class="topBg">
		<div class="fl">
			<div class="quyu">
				<ul class="ulAll">
					<li data-minPrice='' data-maxPrice='' class="active">不限</li>
					<!--<li data-minPrice='0' data-maxPrice='6000'>6千以下</li>
					<li data-minPrice='6000' data-maxPrice='8000'>6-8千</li>
					<li data-minPrice='8000' data-maxPrice='10000'>8千-1万</li>
					<li data-minPrice='10000' data-maxPrice='12000'>1-1.2万</li>
					<li data-minPrice='12000' data-maxPrice='15000'>1.2-1.5万</li>
					<li data-minPrice='15000' data-maxPrice='20000'>1.5-2万</li>
					<li data-minPrice='20000' data-maxPrice='1'>2万以上</li>-->
				</ul>
			</div>
			<div class="price">自定义
				<input type="text" class="minPrice" placeholder="最低价"/>-
				<input type="text" class="maxPrice" placeholder="最高价"/> 元/m²
			</div>
		</div>
		<div class="btn0">
			<button class="reset">重置</button>
			<button class="ok">确定</button>
		</div>
	</div>
</template>
<script>
//	import houseMethod from '../houseRanking';
//	let content = houseMethod;
//	console.log(content)
	export default {
		data() {
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		},
		mounted: function() {
			
			let screenPrice = JSON.parse(sessionStorage.getItem("screenPrice"));
			let content='';
				content+=`<li data-minPrice='0' data-maxPrice=${screenPrice[0].PRICE} style='text-align: left;padding-left: 3%;line-height: 40px;'>${screenPrice[0].PRICE} 元/m²以下</li>`;
			
			for(var i=0;i<screenPrice.length-1;i++){
				if(screenPrice[i].PRICE>=10000){
					content+=`<li data-minPrice=${screenPrice[i].PRICE} data-maxPrice=${screenPrice[i+1].PRICE} style='text-align: left;padding-left: 3%;line-height: 40px;'>${screenPrice[i].PRICE}-${screenPrice[i+1].PRICE} 元/m²</li>`;	
				}else{
					content+=`<li data-minPrice=${screenPrice[i].PRICE} data-maxPrice=${screenPrice[i+1].PRICE} style='text-align: left;padding-left: 3%;line-height: 40px;'>${screenPrice[i].PRICE}-${screenPrice[i+1].PRICE} 元/m²</li>`;	
				}
			}
				content+=`<li data-minPrice=${screenPrice[screenPrice.length-1].PRICE} data-maxPrice='1' style='text-align: left;padding-left: 3%;line-height: 40px;'>${screenPrice[screenPrice.length-1].PRICE} 元/m²以上</li>`
			
			$('.ulAll').append(content)
			
			let data = JSON.parse(localStorage.getItem('data'));
			if(data && data.screenPrice.screenPriceNum){
				$('.ulAll').find('li').each(function(){
					if(parseInt(data.screenPrice.screenPriceSign)==0){
						$('.ulAll').find('li').eq(1).attr('class','active').css('color','#0186c2').siblings().attr('class','');
					}else{
						if($(this).attr('data-minPrice')==data.screenPrice.screenPriceNum.split('-')[0]){
							$(this).attr('class','active').css('color','#0186c2').siblings().attr('class','');
						}
					}
				})
			}
			
			$('.ulAll').on('click','li',function(){
				$(this).css('color','#0186C2').siblings().css('color','#333')
				$(this).addClass('active').siblings().removeClass('active');
				$('.minPrice').val($(this).attr('data-minPrice'))
				$('.maxPrice').val($(this).attr('data-maxPrice'))
			})
			//请求数据
			let houseType = 'new';
			var that = this;
			
//			$('#segmentedControl').on('click', 'a', function() {
//				$(this).addClass('mui-active').siblings().removeClass('mui-active');
//				houseType = $('#segmentedControl .mui-active').attr('type');
//				console.log(houseType)
//				that.ajaxU0(1, houseType);
//			})
			$('.ok').click(()=>{
				$('.fl').hide();
				var data=JSON.parse(localStorage.getItem('data'));
//				console.log(data)
				var obj={};
				var obj0=$('.minPrice').val()+'-'+$('.maxPrice').val();
				if(obj=="-"){
					obj0 = "";
				}
				obj.screenPriceNum =obj0;
				obj.screenPriceSign='';
				if($('.active').attr('data-minprice')==0){
					obj.screenPriceNum =$('.maxPrice').val();
					obj.screenPriceSign=0;
				}
				if($('.active').attr('data-maxprice')==1){
					obj.screenPriceNum =$('.minPrice').val();
					obj.screenPriceSign=1;
				}
				data.page=1,
				data.screenPrice=obj;
				localStorage.setItem('data',JSON.stringify(data));
				that.$router.push({
					path: '/',
					name: 'index',
					query: {
						type: data.houseType
					}
				});
				location.reload();
			})
			
			
			
			$('.ul0 li').eq(1).click(function(){
				$('.fl').show();
			})
			$('.reset').click(function(){
				$('.ulAll').find('li').each(function(){
					$(this).attr('class','').css('color','#333')
				})
				$('.ulAll li').eq(0).attr('class','active').css('color','#0186c2')
				$('.minPrice').val('')
				$('.maxPrice').val('')
			})
			$('.topBg').click(function(e){
				location.href='#/'
				$('.lbt').slideDown();
			})
			$('.topBg div').click(function(event){
				event.stopPropagation();
			})
		},
		methods: {
//			priceAjax: function(page0, houseType) {
//				let ajaxURL = localStorage.getItem("ajaxURL");
//				let city0 = localStorage.getItem("city");
//				var obj={};
//				var obj0=$('.minPrice').val()+'-'+$('.maxPrice').val();
//				obj.screenPrice =obj0;
//				obj.screenPriceSign='';
//				if($('.active').attr('data-minprice')==0){
//					obj.screenPrice =$('.maxPrice').val();
//					obj.screenPriceSign=0;
//				}
//				if($('.active').attr('data-maxprice')==1){
//					obj.screenPrice =$('.minPrice').val();
//					obj.screenPriceSign=1;
//				}
//				$.ajax({
//					url: `${ajaxURL}/houseweb/H5/allHoustListDataInit.do`,
//					cache: false,
//					data: {
//						city: city0,
//						page: page0,
//						houseType: houseType,
//						//screenSpace:screenObj.screenSpace,
//						//screenTradArea:screenObj.screenTradArea,
//						//screenAllPrice:screenObj.screenAllPrice,
//						//screenArea:screenObj.screenArea,
//						screenPrice: {
//							screenPriceNum:obj.screenPrice,
//							screenPriceSign:obj.screenPriceSign
//						},
//						//screenHuXing:screenObj.screenHuXing,
//						//screenCharacteristic:screenObj.screenCharacteristic,
//						//screenMetro:screenObj.screenMetro,
//						//screenMetroer:screenObj.screenMetroer,
//						//jianZhuXingTai:screenObj.jianZhuXingTai,
//						//jianZhuLeiXing:screenObj.jianZhuLeiXing,
//						//jianZhuNianDai:screenObj.jianZhuNianDai,
//						//louCeng:screenObj.louCeng,
//						//zhuangXiu:screenObj.zhuangXiu,
//						//cheWeiBi:screenObj.cheWeiBi,
//						//sheQuGuiMo:screenObj.sheQuGuiMo,
//						//rongJiLv:screenObj.rongJiLv
//					},
//					dataType: 'jsonp',
//					success: function(data) {
//						console.log(data.data.houseList)
//						var list = data.data.houseList;
//						var content = '';
//						for(var i = 0; i < data.data.houseList.length; i++) {
//							content = `<li class=" mui-media" style='padding: 11px 9px;'>
//								<router-link to="/xiangqing">
//									<img class="mui-media-object mui-pull-left" style="" src=${list[i].src} >
//									<div class="mui-media-body" style='font-size:15px;'>
//										${list[i].houseName}
//										<p class="mui-ellipsis" style="margin-top:6px;margin-bottom:0;color:#666;">${list[i].houseAddress}</p>
//										<p class="mui-ellipsis" style="margin-top:6px;margin-bottom:0;color:#666"><img src="static/images/prompt-star.png" alt="" style='width:14px;'/><img src="static/images/prompt-star.png" alt="" style='width:14px;'/><img src="static/images/prompt-star.png" alt="" style='width:14px;'/><img src="static/images/prompt-star.png" alt="" style='width:14px;'/>${list[i].houseCore}分　${list[i].housePrice}元/平</p>
//										<p class="mui-ellipsis" style="margin-top:6px;margin-bottom:0;">
//											<span style="line-height:20px;border:1px solid #ccc;margin:1px;padding:2px 4px;font-size:12px;">在售</span>
//											<span style="line-height:20px;border:1px solid #ccc;margin:1px;padding:2px 4px;font-size:12px;">住宅</span>
//											<span style="line-height:20px;border:1px solid #ccc;margin:1px;padding:2px 4px;font-size:12px;">地铁口</span>
//											<span style="line-height:20px;border:1px solid #ccc;margin:1px;padding:2px 4px;font-size:12px;">公元地产</span>
//										</p>
//									</div>
//								</router-link>
//							</li>`;
//							$('.newHouse').append(content)
//						}
//					}
//				})
//			}
		}
	}
</script>
<style scoped>
	.topBg {
		position: absolute;
		width: 100%;
		height: 600px;
		z-index: 999;
		overflow: hidden;
		background-color: rgba(0,0,0,0.3);
	}
	.ul2 {
		display: none;
		height: 240px;
		overflow: auto;
	}
	.fl {
		position: absolute;
		width: 100%;
		height: 240px;
		overflow: auto;
		background-color: #fff;
	}
	
	.quyu {
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #eee;
	}
	
	ul {
		padding: 0;
		margin: 0;
		list-style: none;
		color: #333;
		width: 100%;
		font-size: 13px;
		border-right: 1px solid #eee;
	}
	
	ul:last-child {
		border: 0;
	}
	
	ul li {
		text-align: left;
		padding-left: 3%;
		line-height: 40px;
	}
	
	ul li.active {
		color: #0186c2;
	}
	.price {
		margin: 10px 3%;
	}
	.price input {
		width: 25%;
		height: 30px;
		margin: 0 5px;
		font-size: 14px;
	}
	
	.btn0 {
		position: absolute;
		width: 100%;
		top: 240px;
		background-color: #f8f8f8;
		display: flex;
		justify-content: space-around;
	}
	
	.btn0 button {
		width: 35%;
		margin: 24px 0;
	}
	
	.btn0 button.ok {
		background-color: #0186c2;
		color: #fff;
	}
</style>